<%@ page language="java" contentType="text/html; charset=UTF-8" import="org.foreveross.que.infra.base.constant.SysConstants"
    pageEncoding="UTF-8"%>
<!-- widget stats -->
<div class="widget border-cyan" id="widget-stats">
	<!-- widget header -->
	<div class="widget-header bg-cyan">
		<!-- widget icon -->
		<div class="widget-icon">
			<i class="icon-comments"></i>
		</div>
		<!-- widget title -->
		<h4 class="widget-title" id="chatTitle"></h4>
		<!-- widget action, you can also use btn, btn-group, nav-tabs or nav-pills (also support dropdown). enjoy! -->
		<input type="hidden" id="chatTid"  />
		<div class="widget-action color-cyan">
		<A class="dropdown-toggle" href="javascript:void();" onclick="hideChat();" data-toggle="dropdown"> <I class="icon-reply-all"></I> 返回</A>
			<button data-toggle="collapse" data-collapse="#widget-stats"
				class="btn btn-up">
				<i class="icon-minus" data-toggle-icon="icon-minus icon-plus"></i>
			</button>
		</div>
	</div>
	<!-- /widget header -->

	<div class="widget-content">
		<div class="tab-content">
			<!-- chat container, use mscrollbar -->
			<div class="chat-module">
				<!-- chat -->
				<ol class="chats" id="accordion_chat">

				</ol>
				<!-- /chat -->
			</div><!-- /chat container -->
			<ul id="pageIndexs_chat" class="pagination pagination-sm pull-right">
                  
          </ul> 
		</div><!-- /widget content -->
	</div><!-- /widget stats -->
</DIV><!-- widget stats -->

<!-- QUICK POST
                            ================================================== -->
<!-- widget quick post -->
<div class="widget border-cyan" id="widget-quickpost">
	<!-- widget header -->
	<div class="widget-header bg-cyan">
		<!-- widget icon -->
		<div class="widget-icon">
			<i class="icon-file-text-alt"></i>
		</div>
		<!-- widget title -->
		<h4 class="widget-title">回复</h4>
		<!-- widget action, you can also use btn, btn-group, nav-tabs or nav-pills (also support dropdown). enjoy! -->

	</div>
	<div class="tab-content">
		<ul>
			<li>内容</li>
			<li><textarea name="vo.chatVo.sayInfo" rows="5" style="width: 99%"
					data-provide="typeahead"></textarea>
			</li>
			<li><button onclick="replyTopic();" class="btn btn-primary">
					<i class="icon-mail-forward"></i> 提交
				</button>   
			</li>
		</ul>
	</div>
</div>

<div id="chatTemplete" style="display: none">
	<li class="{roleType}">
		<div class="avatar">
		<a href="javascript:{answer}">
			<img src="${pageContext.request.contextPath}/images/{roleImages}.jpg" alt="" title="{showChatTitle}">
		</a>
		</div>
		<div class="messages">
			<div class="message-box">
				<p>{info}</p>
				<time datetime="{datetime}">{showName} | {datetime}</time>
			</div>
		</div>
	</li>
</div>

<script>

function hideChat(){
	$("#topicPageContent").show();
	$("#chatPageContent").hide();
}

var withOutTopic = false;//从launch_topic进入是，设置为false；

/**
* 这里使用异步查询模板匹配航记录
*/
function findChatRows(pageIndex,tid){
var pageI = 1;
if(pageIndex!=undefined&&pageIndex!=''){
	pageI=pageIndex;
}
if(tid==undefined){
	tid = $("#chatTid").val();
}

$("#pageIndex").val(pageI);//设置搜索form域

	var url = "${pageContext.request.contextPath}/help/chat/search.action";
	var formData = $('#search_form').serialize();
	formData += "&vo.tid="+tid;
	formData += "&vo.withOutTopic="+withOutTopic;
	sysType = $("#sysType").val();
	$.ajax({
		type : 'post',
		cache : false,
		dataType : 'json',
		url : url,
		loading : '正在查询...',
		data : formData,
		success : function(data) {
			doCallback(combineChatHtml,[data]);
		},
		error : function(message) {
			$("#topicPageContent").show();
			$("#chatPageContent").hide();
			alert("查询出错");
		}
	});
	
}


function combineChatHtml(data){
	var rowHtml = "--";
	var templete = $("#chatTemplete").html();
	var pageData = data.pageData;
	var topic = "";
	
	if(!withOutTopic||withOutTopic=='false'){
		$("#accordion_chat").html("");
		var topicTempete = templete;
		topicTempete = topicTempete.replaceAll("{answer}","void();");
		topicTempete = topicTempete.replaceAll("{showChatTitle}","话题内容");
		topic = loadReplyRow(topicTempete,data,data.createAccount,data.createAccount,data.createUrole,data.subjectInfo);
		$("#chatTitle").html(data.title);
		$("#chatTid").val(data.id);
		topic = topic.replaceAll("{answer}","void();");
		if(!withOutTopic){
			withOutTopic=true;
		}
		$("#accordion_chat").append(topic);
	}else{
		var element = $("#accordion_chat").find("li:first");
		$("#accordion_chat").html("");
		$("#accordion_chat").append(element);
	}
	
	for(var i=0;i<pageData.result.length;i++){
		var row = pageData.result[i];
		rowHtml = loadReplyRow(templete,row,row.uaccount,row.uaccount,row.replyRole,row.sayInfo);
		$("#accordion_chat").append(rowHtml);
	}
	if(pageData.result.length==0){
		$("#accordion_chat").append("没有回复呀，抢个沙发吧！");
		$("#pageIndexs_chat").html("");
	}else{
		var showIndexs = getShowPageIndex(pageData.pageIndex,pageData.pageCount,'findChatRows');
		
		$("#pageIndexs_chat").html(showIndexs);
	}
}

function loadReplyRow(rowHtml,row,uaccount,uname,urole,info){
//	alert(uaccount);alert(uname);alert(urole);alert(info);
//	alert(JSON.stringify(row));
	if(uname==null){
		uname='游客';
	}
	if(uaccount==null){
		uaccount = '游客';
	}
	if(uaccount=='${SPRING_SECURITY_CONTEXT.authentication.principal.username}'){/**kaloa的登录账号太长了.......**/
		rowHtml = rowHtml.replaceAll("{showName}","我");
	}
	if(urole==<%=SysConstants.CUSTOMER_SERVICE_ROLE%>){
		rowHtml = rowHtml.replaceAll("{roleType}","self");
		rowHtml = rowHtml.replaceAll("{roleImages}","2");
		rowHtml = rowHtml.replaceAll("{showName}","客服");
	}else{
		rowHtml = rowHtml.replaceAll("{roleType}","other");
		rowHtml = rowHtml.replaceAll("{roleImages}","1");
		rowHtml = rowHtml.replaceAll("{showName}",uname);
	}
	rowHtml = rowHtml.replaceAll("{showChatTitle}","设置为话题标准答案");
	rowHtml = rowHtml.replaceAll("{answer}","answer({sid});");
	rowHtml = rowHtml.replaceAll("{sid}",row.id);
	rowHtml = rowHtml.replaceAll("{userName}",uname);
	rowHtml = rowHtml.replaceAll("{datetime}",row.createTime.replace("T"," "));
	rowHtml = rowHtml.replaceAll("{info}",info);
	return rowHtml;
}

function replyTopic(){
	var sayInfo = $.trim(chatEditor.html());
	var tid = $("#chatTid").val();
	var formData = {"vo.tid":tid,"vo.sayVo.sayInfo":sayInfo};//注:sysType从topic来拿
	$.ajax({
		type : 'post',
		cache : false,
		dataType : 'json',
		url : "${pageContext.request.contextPath}/help/chat/reply.action",
		loading : '正在获取...',
		data : formData,
		success : function(msg) {
			if(msg!='1'){
				
				alert(msg);
			}else{
				chatEditor.html('');
			}
			findChatRows(1,tid);			
		},
		error : function(message) {
			alert("提交问题失败");
		}
	});
}

function answer(sid){
	var tid = $("#chatTid").val();
	formData = {"vo.sayVo.id":sid,"vo.tid":tid} ;
	$.ajax({
		type : 'post',
		cache : false,
		dataType : 'json',
		url : "${pageContext.request.contextPath}/help/chat/answer.action",
		loading : '正在获取...',
		data : formData,
		success : function(msg) {
			if(msg!='1'){
				alert(msg);
			}else{
				alert("设置成功！");
			}
			findChatRows(1,tid);			
		},
		error : function(message) {
			alert("提交问题失败");
		}
	});
}

function deleteReply(sid){
	formData = {"vo.sayVo.id":sid} ;
	$.ajax({
		type : 'post',
		cache : false,
		dataType : 'json',
		url : "${pageContext.request.contextPath}/help/chat/deleteReply.action",
		loading : '正在获取...',
		data : formData,
		success : function(msg) {
			var tid = $("#chatTid").val();
			alert(msg);
			findChatRows(1,tid);			
		},
		error : function(message) {
			alert("提交问题失败");
		}
	});
}

</script>